<template>
  <div
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
    <div class="custom-table" style="background: #f8f8f8; padding-top: 10px; padding-bottom: 10px">
      <el-form ref="form" :model="form" label-width="250px" :rules="rules" size="mini">
        <el-form-item label="店铺名称" align="left" prop="name">
          <el-input v-model="form.name" style="width: 300px" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="店铺logo(宽高-1:1)" align="left" prop="logo">
          <el-upload
            class="avatar-uploader"
            :headers="getHeader()"
            :action="UploadFileUrl"
            name="myUploadFile"
            :show-file-list="false"
            :on-success="uploadLogoSuccess">
            <img v-if="form.logo" :src="form.logo" class="avatar" style="width:78px">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <el-input v-model="form.logo" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="店铺banner(宽高-2:1)" align="left" prop="bannerArr">
          <my-upload-more ref="my-upload-more" :image-params-arr="form.bannerArr" :callback="callbackSetImageArr"/>
        </el-form-item>
        <el-form-item label="店铺定位" align="left" prop="location">
          <el-input v-model="form.location" style="width: 300px"></el-input>
          <label style="color: #d21b1b; font-size: 12px; text-decoration: underline; cursor: pointer" @click="getLocation">获取地址 <i class="el-icon-location"></i></label>
        </el-form-item>
        <el-form-item label="店铺详细地址" align="left" prop="address">
          <span v-if="form.province" v-text="form.province+','+form.city+','+form.county"></span>
          <el-input v-model="form.address" style="width: 300px"></el-input>
        </el-form-item>
      </el-form>
      <div style="width: 750px; display: flex; line-height: 50px;">
        <div style="flex: 1">
          <el-button type="primary" @click="submit">提交修改</el-button>
          <el-button type="danger" @click="cancelSubmit" v-if="updateInfo.id>0">撤销</el-button>
        </div>
        <div style="flex: 1; line-height: 25px;" v-if="updateInfo.id>0">
          <el-button type="danger" @click="showSubmitUpdate">查看提交</el-button>
          <div>后台处理结果: <span class="price-font" v-text="updateInfo.status.name"></span>,最后更新时间 <span class="price-font" v-text="updateInfo.updatedTime"></span></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TableFieldTools from '../Tools/TableFieldTools'
import MyUploadMore from '../Common/MyUploadMore'

export default {
  name: 'SupplierUpdateMainPage',
  components: {MyUploadMore},
  mounted () {
    // this.$refs.myCommonListTable.setListData(DemoData.SysUser.list)
    let $this=this
    setTimeout(function () {
      $this.getDetail()
      $this.getSubmitUpdateInfo()
    },500)
  },
  data:function () {
    let $this=this
    var checkShopNameCurr=function (rule, value, callback) {
      if (!$this.checkShopName(value)){
        callback(new Error('店铺名称 必须是由(中文,数字,字母)组成，长度(2,20)位之间'))
      }else{
        callback()
      }
    }
    return {
      loading:false,
      uploadImageArr:[],
      bannerArrDisabled:false,
      updateInfo:{
        "id": 0,
        "logo": "http://image.yangfankj.com/shop/logo/7.jpg",
        "bannerArr":[
          "http://image.yangfankj.com/shop/logo/8.jpg",
          "http://image.yangfankj.com/shop/logo/8.jpg"
        ],
        "province": "陕西省",
        "city": "西安市",
        "county": "长安区",
        "address": "韦曲街道西安爱月儿母婴护理GOGO街区",
        "location":"108.912233,34.158586",
        "info": "",
        "status":{
          "name": "待处理",
          "id": 0
        },
        "updatedTime": "2022-10-06 21:48:58"
      },
      form:{
        id: 0,
        name: '',
        logo: '',
        bannerArr: [],
        province:'',
        city:'',
        cityCode:'',
        county:'',
        location: '',
        address: '',
      },
      rules:{
        name: [
          {required: true, message: '请输入 店铺名称', trigger: ['blur', 'change']},
          {validator:checkShopNameCurr}
        ],
        logo: [
          {required: true, message: '请输入 店铺logo', trigger: ['blur', 'change']},
          {min: 30, max: 100, message: '长度在 30 到 100 个字符', trigger: ['blur', 'change']}
        ],
        bannerArr: [
        ],
        location: [
          {required: true, message: '请输入 店铺定位', trigger: ['blur', 'change']},
          {min: 10, max: 30, message: '长度在 10 到 30 个字符', trigger: ['blur', 'change']}
        ],
        address: [
          {required: true, message: '请输入 店铺定位', trigger: ['blur', 'change']},
          {min: 5, max: 100, message: '长度在 5 到 100 个字符', trigger: ['blur', 'change']}
        ],
      }
    }
  },
  methods:{
    // 获取店铺信息
    getSubmitUpdateInfo:function () {
      let $this=this
      $this.loading=true
      $this.MyRequest($this.ApiDoNameSupplier + 'Supplier/getSubmitUpdate', {}, function (data) {
        $this.updateInfo=data
        if (data.bannerArr && data.bannerArr.length>0){
          $this.form.bannerArr=data.bannerArr
          $this.$refs['my-upload-more'].setImageArr($this.form.bannerArr)
          $this.uploadImageArr = TableFieldTools.formatImageArr(data.bannerArr)
        }
        if (data.name){
          $this.form.name = data.name
        }
        $this.$forceUpdate()
        $this.loading=false
      },function (response) {
        $this.$message.error(response.message)
        $this.loading=false
      })
    },
    showSubmitUpdate:function () {
      this.uploadImageArr = TableFieldTools.formatImageArr(this.updateInfo.bannerArr)
      this.form.bannerArr=this.updateInfo.bannerArr
      this.$refs['my-upload-more'].setImageArr(this.form.bannerArr)
      this.form.logo=this.updateInfo.logo
      this.form.name=this.updateInfo.name
      this.form.location=this.updateInfo.location
      this.form.province=this.updateInfo.province
      this.form.city=this.updateInfo.city
      this.form.county=this.updateInfo.county
      this.form.address=this.updateInfo.address
      this.$forceUpdate()
    },
    callbackSetImageArr: function (formImageArr) {
      this.form.bannerArr = formImageArr
      console.log('formImageArr',formImageArr)
    },
    handleMoreUploadSuccess: function (res) {
      // console.log('res',res)
      this.form.bannerArr.push(res.data)
      if (this.form.bannerArr.length>=this.bannerLimitNums){
        this.bannerArrDisabled=true
      }else{
        this.bannerArrDisabled=false
      }
      // this.uploadImageArr=TableFieldTools.formatImageArr(this.form.imageArr)
      // console.log('this.bannerArr', this.form.bannerArr)
    },
    uploadLogoSuccess:function (res) {
      this.form.logo=res.data
    },
    // 解析高德地图参数
    parseMyAMap:function () {
      if (!this.$route.query.mapDataString || this.$route.query.mapDataString.length<10){
        return
      }
      var tmpAddress = JSON.parse(decodeURI(this.$route.query.mapDataString))
      if (tmpAddress.address){
        this.form.province=tmpAddress.province
        this.form.city=tmpAddress.city
        this.form.county=tmpAddress.county
        this.form.address=tmpAddress.address
        this.form.cityCode=tmpAddress.cityCode
        this.form.location=tmpAddress.location
      }
    },
    // 获取定位
    getLocation:function () {
      localStorage.setItem('MyAMapFromDataString',JSON.stringify({
        name:this.$route.name,
        query:this.$route.query,
      }))
      this.$router.push({
        name:'MyAMap',
        query:{
          location:this.form.location?this.form.location:'',
          province:this.form.province?this.form.province:'',
          city:this.form.city?this.form.city:'',
          county:this.form.county?this.form.county:'',
          address:this.form.address?this.form.address:'',
        }
      })
    },
    // 获取店铺信息
    getDetail:function () {
      let $this=this
      $this.loading=true
      $this.MyRequest($this.ApiDoNameSupplier + 'Supplier/info', {}, function (data) {
        $this.form.id = data.id
        $this.form.logo = data.logo
        $this.form.name = data.name
        $this.form.bannerArr = data.bannerArr
        $this.$refs['my-upload-more'].setImageArr($this.form.bannerArr)
        $this.uploadImageArr = TableFieldTools.formatImageArr(data.bannerArr)
        $this.form.province = data.province
        $this.form.city = data.city
        $this.form.county = data.county
        $this.form.cityCode = data.cityCode
        $this.form.location = data.location.join(',')
        $this.form.address = data.address
        $this.parseMyAMap()
        $this.$forceUpdate()
        $this.loading=false
      },function (response) {
        $this.$message.error(response.message)
        $this.loading=false
      })
    },

    // 提交审核
    submit:function () {
      let $this=this
      $this.$refs.form.validate((valid) => {
        if (valid) {
          $this.$confirm('您确认要进行该操作吗?', '系统提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            $this.loading=true
            var form=Object.assign({},$this.form)
            form.bannerArr=form.bannerArr.join(',')
            $this.MyRequest($this.ApiDoNameSupplier+'Supplier/submitUpdate',form,function (data) {
              $this.$message.success('提交成功,请等待后台人员审核')
              $this.getDetail()
              $this.loading=false
              setTimeout(function () {
                location.reload()
              },500)
              $this.$forceUpdate()
            })
          }).catch(() => {
            $this.loading=false
            $this.$forceUpdate()
          });
        }
      })
    },

    cancelSubmit:function () {
      let $this=this
      $this.$confirm('您确认要进行该操作吗?', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        $this.loading=true
        $this.MyRequest($this.ApiDoNameSupplier+'Supplier/submitCancel',{},function (data) {
          $this.$message.success('撤销成功')
          // $this.getDetail()
          $this.loading=false
          setTimeout(function () {
            location.reload()
          },500)
          $this.$forceUpdate()
        })
      }).catch(() => {
        $this.loading=false
        $this.$forceUpdate()
      });
    }
  }
}
</script>

<style scoped>

</style>
